<script setup>
  import { onMounted, ref } from 'vue'
  import { http } from '@/utils/http.js'
  import { parseTime } from '@/utils/index.js'

  const todaySign = ref(false)
  const totalSignDays = ref(0)
  async function getSignDays() {
    const res = await http.request({
      url: '/api/index/signLog',
      method: 'POST',
      data: {},
    })
    if (res.st == 1) {
      totalSignDays.value = res.data.data.length
      //过滤签到的日期
      calenderArr.value.forEach((date) => {
        res.data.data.forEach((item) => {
          let day = parseTime(item.date, '{y}-{m}-{d}').split('-')
          if (day[2][0] == 0) {
            if (date.day == day[2][1]) {
              date.ifSign = true
            }
            if (nowDay.value == day[2][1]) {
              todaySign.value = true
            }
          } else {
            if (date.day == day[2]) {
              date.ifSign = true
            }
            if (nowDay.value == day[2]) {
              todaySign.value = true
            }
          }
        })
      })
    }
  }

  const calenderArr = ref([])
  // 今天
  const nowDate = ref(new Date())
  // 年
  const year = ref(nowDate.value.getFullYear())
  // 月
  const mounth = ref(nowDate.value.getMonth() + 1)
  // 今天
  const nowDay = ref(nowDate.value.getDate())
  // 这个月多少天
  const totalDay = ref(new Date(year.value, mounth.value, 0).getDate())
  // 当月第一天周几
  const firstWeek = ref(new Date(`${year.value}/${mounth.value}/1`).getDay())
  // 当月最后一天周几
  const lastWeek = ref(
    new Date(`${year.value}/${mounth.value}/${totalDay.value}`).getDay()
  )

  //当月日历数据
  function setCalender() {
    for (let i = 0; i < totalDay.value; i++) {
      let day = {
        day: i + 1,
        today: false,
        ifSign: false,
        isShow: true,
      }
      if (i + 1 == nowDay.value) {
        day.today = true
        calenderArr.value.push(day)
      } else {
        calenderArr.value.push(day)
      }
    }
    //补齐头部空位
    supplementStart()
    supplementEnd()
    console.log(calenderArr.value)
  }

  // 补齐头部空位
  function supplementStart() {
    let day = {
      day: 0,
      today: false,
      ifSign: false,
      isShow: false,
    }
    console.log('f')
    // console.log(nowDate.value);
    // console.log(year.value);
    // console.log(mounth.value);
    // console.log(nowDay.value);
    // console.log(totalDay.value);
    console.log(firstWeek.value)
    console.log(lastWeek.value)
    if (firstWeek.value == 0) {
      for (let i = 0; i < 6; i++) {
        calenderArr.value.unshift(day)
      }
    } else if (firstWeek.value != 0 && firstWeek.value != 1) {
      for (let i = 0; i < firstWeek.value - 1; i++) {
        calenderArr.value.unshift(day)
      }
    }
  }
  // 补齐尾部
  function supplementEnd() {
    let day = {
      day: 0,
      today: false,
      ifSign: false,
      isShow: false,
    }
    if (lastWeek.value != 0) {
      for (let i = 0; i < 7 - lastWeek.value; i++) {
        calenderArr.value.push(day)
      }
    }
  }

  //签到
  const signpopup = ref()

  async function signToday() {
    const res = await http.request({
      url: '/api/index/signPost',
      method: 'POST',
      data: {},
    })
    if (res.st == 1) {
      getSignDays()
      signpopup.value.open('center')
    } else {
      uni.utils.toast('签到失败')
    }
  }

  function closePOP() {
    signpopup.value.close('center')
  }

  onMounted(() => {
    setCalender()
    getSignDays()
  })
</script>

<template>
  <view class="sign-content">
    <view class="calender">
      <view class="calender-top">
        <view class="total-sign">
          <text>已累计签到</text>
          <text class="num">{{ totalSignDays }}</text>
          <text>天</text>
        </view>
        <view
          class="sign-button"
          style="background-color: #e4e3e8"
          v-if="todaySign"
        >
          已签到
        </view>
        <view class="sign-button" @click="signToday" v-else> 立即签到 </view>
      </view>
      <view class="calender-title">
        {{ `${year}年${mounth}月` }}
      </view>
      <view class="week">
        <view class="week-item"> 一 </view>
        <view class="week-item"> 二 </view>
        <view class="week-item"> 三 </view>
        <view class="week-item"> 四 </view>
        <view class="week-item"> 五 </view>
        <view class="week-item"> 六 </view>
        <view class="week-item"> 日 </view>
      </view>
      <view class="mounth-day">
        <view
          class="mounth-day-item"
          :class="{ show: !item.isShow }"
          v-for="(item, index) in calenderArr"
          :key="index"
        >
          <view class="icon" :class="{ 'icon-active': item.ifSign }">
            <image
              src="../../static/point.png"
              style="width: 50rpx; height: 50rpx"
              mode=""
            ></image>
            <view v-if="item.ifSign">
              <image
                src="../../static/checked.png"
                style="width: 25rpx; height: 20rpx"
                mode=""
              ></image>
            </view>
            <view class="get-point" v-else> +5 </view>
          </view>
          <view class="mounth-one-day" style="color: #7863ff" v-if="item.today">
            今天
          </view>
          <view class="mounth-one-day" v-else>
            {{ `${mounth}.${item.day}` }}
          </view>
        </view>
      </view>
    </view>

    <!-- 签到出层 -->
    <uni-popup ref="signpopup" type="center">
      <view class="signpopup-content">
        <view class="top-detail">
          <view class="" style="font-size: 48rpx"> 签到成功 </view>
          <view
            class=""
            style="margin: 10rpx 0 27rpx 0; font-size: 40rpx; color: #f0452a"
          >
            <text>+5</text
            ><text style="margin-left: 14rpx; font-size: 28rpx">积分</text>
          </view>
          <view class="take" @click="closePOP"> 开心收下 </view>
        </view>
        <view class="sign-close" @click="closePOP"> </view>
      </view>
    </uni-popup>
  </view>
</template>

<style lang="scss" scoped>
  .sign-content {
    padding: 20rpx;

    .calender {
      padding-bottom: 50rpx;
      box-sizing: border-box;
      border-radius: 26rpx;
      box-shadow: 0px 0px 40px 0px rgba(120, 99, 255, 0.1);

      .calender-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 110rpx;
        padding: 0 40rpx;
        box-sizing: border-box;
        border-bottom: 4rpx solid #f5f5f5;

        .total-sign {
          font-size: 32rpx;

          .num {
            color: red;
          }
        }

        .sign-button {
          width: 142rpx;
          height: 52rpx;
          border-radius: 26rpx;
          background-color: $all-color;
          font-size: 24rpx;
          color: #3d3d3d;
          font-weight: 600;
          text-align: center;
          line-height: 52rpx;
        }
      }

      .calender-title {
        padding: 32rpx 40rpx;
        font-size: 32rpx;
      }

      .week {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 40rpx;

        .week-item {
          width: 14%;
          margin-bottom: 26rpx;
          box-sizing: border-box;
          font-size: 22rpx;
          color: #767676;
          text-align: center;
        }
      }

      .mounth-day {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        padding: 0 40rpx;

        .mounth-day-item {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          width: 14%;
          margin: 0 auto;

          &:nth-child(7n) {
            margin-right: 0;
          }

          .icon {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 74rpx;
            height: 112rpx;
            padding-bottom: 10rpx;
            box-sizing: border-box;
            border-radius: 6rpx;
            background-color: #f5f4fa;

            .get-point {
              font-size: 24rpx;
              color: #b2b2b2;
            }
          }

          .icon-active {
            background-color: $all-color;
            // border: 2rpx solid $all-color;
          }

          .mounth-one-day {
            margin: 21rpx 0;
            font-size: 22rpx;
            color: #767676;
          }
        }

        .show {
          opacity: 0;
        }
      }
    }

    .signpopup-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 552rpx;

      .top-detail {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 552rpx;
        height: 700rpx;
        padding-top: 378rpx;
        box-sizing: border-box;
        background: url('https://ojqn.wm2177.com/wechat_imgs/sign-bg.png')
          no-repeat;
        background-size: contain;

        .take {
          width: 408rpx;
          height: 88rpx;
          background-color: $all-color;
          border-radius: 44rpx;
          text-align: center;
          line-height: 88rpx;
          font-size: 36rpx;
          color: #3d3d3d;
          font-weight: 600;
        }
      }

      .sign-close {
        width: 70rpx;
        height: 70rpx;
        background: url('https://ojqn.wm2177.com/wechat_imgs/sign-close.png')
          no-repeat;
        background-size: contain;
      }
    }
  }
</style>
